<template>
  <CardBox :noGap="false" type="cert" @click-button="clickButton">
    <template v-if="certificateList">
      <UploadImg
        ref="uploadImgRef"
        :fileList="fileList"
        size="large"
        customUpload
        :showUpload="showUpload"
        @removeFile="RemoveCertificate"
        @selectFile="UploadCertificate"
      ></UploadImg>
      <NoData hiddenMobile v-if="certificateList.length == 0" size="mini" />
    </template>
    <template v-else>
      <div class="pc-skeleton">
        <div class="pc-skeleton-inner">
          <Skeleton
            width="180px"
            height="240px"
            radius="16px"
            v-for="i in 3"
            :key="i"
          ></Skeleton>
        </div>
      </div>
      <div class="mobile-skeleton">
        <div class="mobile-skeleton-inner">
          <Skeleton
            width="614px"
            v-for="i in 4"
            :key="i"
            height="819px"
            radius="51px"
          ></Skeleton>
        </div>
      </div>
    </template>
  </CardBox>
</template>

<script setup lang="ts">
import {
  computed,
  defineAsyncComponent,
  getCurrentInstance,
  onBeforeUnmount,
  onMounted,
  ref,
} from "vue";
import type { CertificateListItem } from "../../../../../types/profile";
import {
  postCertificateAdd,
  postCertificateDelete,
  postCertificateList,
} from "../../../../../api/profile";
import { message } from "ant-design-vue";
const CardBox = defineAsyncComponent(() => import("./common/CardBox.vue"));

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t

const certificateList = ref<CertificateListItem[] | undefined>();

// 按钮点击
const uploadImgRef = ref();
const clickButton = (type: string) => {
  // 调用api，实现上传功能
  uploadImgRef.value.selectFile();
};

// 获取证书列表
const data = ref({
  en: undefined,
  cn: undefined,
});
const getCertificateList = async () => {
  let res_cn = await postCertificateList();
  certificateList.value = res_cn.data || [];
};
getCertificateList();

// 移动端证书列表
const fileList = computed(() => {
  return certificateList.value?.map((item) => item.single_pic);
});

// 上传证书
const UploadCertificate = async (file: File) => {
  let formData = new FormData();
  formData.append("file", file);
  let res = await postCertificateAdd(formData);
  if (res.code === 200) {
    message.success($t('message.success.upload.cert'));
    getCertificateList();
  } else {
    message.error($t('message.error.upload.cert'));
  }
};

// 删除证书
const RemoveCertificate = (index: number) => {
  let id = certificateList.value![index].id;
  deleteCertificate(id);
};
// 删除证书-接口
const deleteCertificate = async (id: number) => {
  let res = await postCertificateDelete(id);
  if (res.code === 200) {
    message.success($t('message.success.delete'));
    getCertificateList();
  } else {
    message.error($t('message.error.delete'));
  }
};

// 是否显示上传控件按钮
const showUpload = ref();
const resetShowUpload = () => {
  showUpload.value = isMobile();
};
onMounted(() => {
  resetShowUpload();
  window.addEventListener("resize", resetShowUpload);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resetShowUpload);
});
</script>
<style scoped lang="less">
.pc-skeleton-inner,
.mobile-skeleton-inner {
  display: flex;
  &.pc-skeleton-inner {
    gap: 16px;
  }
  &.mobile-skeleton-inner {
    flex-wrap: wrap;
    gap: 56px;
  }
}
</style>
